var tabList = [{
			id: 0,
			name: '全部'
		},
		{
			id: 1,
			name: '待付款'
		},
		{
			id: 2,
			name: '待发货'
		},
		{
			id: 3,
			name: '待收货'
		},
		{
			id: 4,
			name: '已完成'
		},
		{
			id: 5,
			name: '已取消'
		}
	],
	tagIndex = getValueByParam('index'),
	swiperTab = null,
	swiperOrder = null;

$(() => {
	initSwiper();
	loadData();
	initListener();
})

initListener = () => {
	$("#load_layout_all").on('click', (e) => {
		loadData();
	});
	$("#load_layout_pay").on('click', (e) => {
		loadData();
	});
	$("#load_layout_send").on('click', (e) => {
		loadData();
	});
	$("#load_layout_recive").on('click', (e) => {
		loadData();
	});
	$("#load_layout_cancel").on('click', (e) => {
		loadData();
	});
	$("#load_layout_finish").on('click', (e) => {
		loadData();
	});
}

loadData = () => {
	setLoadingState('load_layout_all', 'loading_all', 'state_img_all', 'state_text_all', 0);
	setTimeout(() => {
		queryOrderList(tagIndex, res => {

			setLoadingState('load_layout_all', 'loading_all', 'state_img_all', 'state_text_all', -
			1);
			setOrderList(tagIndex, res, 'order_all');

			setLoadingState('load_layout_pay', 'loading_pay', 'state_img_pay', 'state_text_pay', -
			1);
			let toPay = res.filter(e => e.orderStatus == 10);
			setOrderList(tagIndex, toPay, 'order_pay');

			setLoadingState('load_layout_send', 'loading_send', 'state_img_send', 'state_text_send',
				-1);
			let toSend = res.filter(e => e.orderStatus == 20);
			setOrderList(tagIndex, toSend, 'order_send');

			setLoadingState('load_layout_recive', 'loading_recive', 'state_img_recive',
				'state_text_recive', -1);
			let toRecive = res.filter(e => e.orderStatus == 30);
			setOrderList(tagIndex, toRecive, 'order_recive');

			setLoadingState('load_layout_cancel', 'loading_cancel', 'state_img_cancel',
				'state_text_cancel', -1);
			let toCancel = res.filter(e => e.orderStatus == 40);
			setOrderList(tagIndex, toCancel, 'order_cancel');

			setLoadingState('load_layout_finish', 'loading_finish', 'state_img_finish',
				'state_text_finish', -1);
			let toFinish = res.filter(e => e.orderStatus == 50);
			setOrderList(tagIndex, toFinish, 'order_finish');
		})
	}, 500)

}

setOrderList = (index, mlist, listId) => {
	$(`#${listId}`).html('');
	let itemHtml = ``;
	for (var i = 0; i < mlist.length; i++) {
		let obj = mlist[i];
		let orderNo = obj.orderNo;
		itemHtml += `<div class="order_item">
						<div class="order_header">
							<span>订单号:${orderNo}</span>
							<span class="order_status">${obj.orderStatusName}</span>
						</div>`;
		let orderItemVOs = obj.orderItemVOs;
		for (var j = 0; j < orderItemVOs.length; j++) {
			let childObj = orderItemVOs[j];

			itemHtml += `<div class="order_item_child" onclick="onViewOrderDetail('${orderNo}','${childObj.id}')">
							<img src="${childObj.goodsPictureUrl}" class="order_img" />
							<div class="order_content">
								<span class="title">${childObj.goodsName}</span>
								<span class="des">${childObj.specifications[0].specValue},${childObj.specifications[1].specValue}</span>
							</div>
							<div class="order_price">
								<div class="goods_price">
									<span class="unit">¥</span>
									<span class="price">${childObj.actualPrice}</span>
								</div>
								<div class="goods_quantity">
									<span class="unit">X</span>
									<span class="num">${childObj.buyQuantity}</span>
								</div>
							</div>
						</div>`;
		}
		let orderStatus = obj.orderStatus;
		let btnItemHtml = ``;
		if (orderStatus == 10) {
			btnItemHtml = `<div class="order_option">
								<button class="btn_cancel" onclick="onCancelOrder('${orderNo}')">取消订单</button>
								<button class="btn_def" onclick="onPayOrder('${orderNo}',${obj.paymentAmount})">付款</button>
							</div>`;
		} else if (orderStatus == 20) {
			btnItemHtml = `<div class="order_option">
								<button class="btn_cancel" onclick="onCancelOrder('${orderNo}')">取消订单</button>
								<button class="btn_def" onclick="onPayOrder('${orderNo}',${obj.paymentAmount})">再次购买</button>
							</div>`;
		} else if (orderStatus == 30) {
			btnItemHtml = `<div class="order_option">
								<button class="btn_def" onclick="onConfirmOrder('${orderNo}')">确认收货</button>
							</div>`;
		} else if (orderStatus == 40) {
			btnItemHtml = ``;
		} else if (orderStatus == 50) {
			btnItemHtml = `<div class="order_option">
								<button class="btn_cancel" onclick="onApplyServiceOrder('${orderNo}')">申请售后</button>
								<button class="btn_def" onclick="onEvaluateOrder('${orderNo}')">评价</button>
							</div>`;
		}

		itemHtml += `<div class="order_total">
						<span>总价:¥${obj.totalAmount}</span>
						<span>运费:¥${obj.freightFee}</span>
						<div class="goods_price">
							<span class="real_pay">实付:</span>
							<span class="unit">¥</span>
							<span class="price">${obj.paymentAmount}</span>
						</div>
					</div>
					${btnItemHtml}
				</div>`;
	}
	$(`#${listId}`).html(itemHtml);
}

onViewOrderDetail = (orderNo, id) => {
	navigateTo(`detail.html?orderNo=${orderNo}&id=${id}`)
}

onApplyServiceOrder = (orderNo) => {
	navigateTo(`apply_service.html?orderNo=${orderNo}`)
}

onEvaluateOrder = (orderNo) => {
	navigateTo(`evaluate.html?orderNo=${orderNo}`)
}

onConfirmOrder = (orderNo) => {
	showActionDialog('', `您确定收到宝贝吗？`, res => {
		let subLoading = layer.open({
			type: 2,
			shadeClose: false,
			content: '正在确认...'
		});
		setTimeout(() => {
			layer.close(subLoading);
			showToast('确认成功！');
			loadData();
		}, 500)
	})
}

onCancelOrder = (orderNo) => {
	showActionDialog('取消订单提示', `您确定要取消该订单吗？`, res => {
		let subLoading = layer.open({
			type: 2,
			shadeClose: false,
			content: '正在取消...'
		});
		setTimeout(() => {
			layer.close(subLoading);
			showToast('取消成功！');
			loadData();
		}, 500)
	})
}

onPayOrder = (orderNo, paymentAmount) => {
	showActionDialog('', `需要支付:${paymentAmount}元!`, res => {
		let subLoading = layer.open({
			type: 2,
			shadeClose: false,
			content: '正在支付...'
		});
		setTimeout(() => {
			layer.close(subLoading);
			showToast('支付成功！');
			loadData();
		}, 500)
	})
}

initSwiper = () => {
	$("#swiper_tabs").html('');
	let tabItemHtml = ``;
	tabList.forEach((e, i) => {
		let actived = '';
		if (tagIndex == i) {
			actived = 'selected';
		}
		tabItemHtml += `<div class="swiper-slide ${actived}">${e.name}</div>`;
	})
	$("#swiper_tabs").html(tabItemHtml);

	initListener();
}

initListener = () => {
	swiperOrder = new Swiper('.swiper_order', {
		initialSlide: tagIndex,
		direction: 'horizontal', //Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。  ${loadGoodsBykey(e.key)}
		loop: false,
		nested: true,
		noSwiping: true,
		autoHeight: true, //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
		observeParents: true, // 将观察body
		onSlideChangeEnd: function(swiper) {
			//swiperTab.slideTo(swiper.activeIndex, 1000, false);
		}
	});

	swiperTab = new Swiper('.swiper_tab', {
		initialSlide: tagIndex,
		slidesPerView: 6,
		paginationClickable: false,
		spaceBetween: 6, //slide之间的距离（单位px）。
		freeMode: true, //默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。
		loop: false, //是否可循环
		noSwiping: false,
		centeredSlides: false,
		onTab: function(swiper) {
			let n = swiper.clickedIndex;
			console.log('n=' + n)
		},
		observeParents: true, // 将观察body
		onSlideChangeEnd: function(swiper) {
			//console.log('00='+swiper.activeIndex)
			//swiperTab.slideTo(swiper.activeIndex, 1000, false); // 使Swiper2跟随滑动
		}
	});
	swiperTab.slides.each(function(index, val) {
		var ele = $(this);
		ele.on("click", function() {
			setSwiperTagSlide(ele, index);
			swiperOrder.slideTo(index, 500, false);
		});
	});
}

setSwiperTagSlide = (ele, index) => {
	$(".swiper_tab .swiper-slide").removeClass("selected");
	ele.addClass("selected");
}
